<template>

	<view>
		<view class="warp">

			<view class="box">
				<view class="tu"><text class="tu_btn" style="left:220rpx;">近期疫情数据</text></view>
				<t-table border="0" border-color="#aa44aa" @change="change">
					<t-tr font-size="18" color="#ffffff" align="center"
						style="background-color: #05105d;width: 700rpx;font-weight: 700;">
						<t-th align="center">日期</t-th>
						<t-th align="center">新增</t-th>
						<t-th align="center">累计</t-th>
						<t-th align="center">治愈</t-th>
						<t-th align="center">死亡</t-th>
					</t-tr>
					<t-tr font-size="15" color="#ffffff" align="center" v-for="item,key in tableList" :key="item.id" v-if="key<6"
						style="background-color: #031f32;">
						<t-td align="center">{{ item.Date }}</t-td>
						<t-td align="center">{{ item.newDiagnosis }}</t-td>
						<t-td align="center">{{ item.totalDiagnosis }}</t-td>
						<t-td align="center">{{ item.totalHeal }}</t-td>
						<t-td align="center">{{ item.totalDeath }}</t-td>
					</t-tr>
				</t-table>
			</view>
		</view>

		<view class="tu">

			<text class="tu_btn" @click="change1">新增/确诊累计</text>

			<text class="tu_btn" @click="change2">死亡/治愈累计</text>

		</view>
		<uni-ec-canvas class="uni-ec-canvas" style="position: relative;top: 100rpx;" v-if="flag=='1'" :ec="ec"
			@inited="initedEc">
		</uni-ec-canvas>
		<uni-ec-canvas class="uni-ec-canvas" style="position: relative;top: 100rpx;" v-if="flag=='2'" :ec="ec2"
			@inited="initedEc2">
		</uni-ec-canvas>
		<view class="tu"><text class="tu_btn" style="left: 240rpx;top: 150rpx;">该地安全度</text></view>
		<uni-ec-canvas class="uni-ec-canvas" style="position: relative;top: 100rpx;" :ec="ec3" @inited="initedEc3">
		</uni-ec-canvas>
	</view>
</template>

<script>
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
	import tTable from '@/components/t-table/t-table.vue';
	import tTh from '@/components/t-table/t-th.vue';
	import tTr from '@/components/t-table/t-tr.vue';
	import tTd from '@/components/t-table/t-td.vue';

	export default {
		props: ["searchLocation"],
		mounted() {
			this.ec.option.title.text = this.searchLocation + ' * 新增/累计确诊';
			this.ec2.option.title.text = this.searchLocation + ' * 疫情治愈/死亡趋势图';
			uni.request({
				header: {
					'Content-Type': 'application/json'
				},
				url: "http://101.43.7.172:5678/data-process/getDatasByCity",
				method: "POST",
				data: {
					"city": this.searchLocation
				},
				success: (res) => {
					var TotalityData = res.data.data.LocationData;
					this.tableList = TotalityData;

				}
			})

		},
		components: {
			tTable,
			tTh,
			tTr,
			tTd,
			uniEcCanvas
		},


		methods: {
			initedEc(myChart) {
				uni.request({
					header: {
						'Content-Type': 'application/json'
					},
					url: "http://101.43.7.172:5678/data-process/getDatasByCity",
					method: "POST",
					data: {
						"city": this.searchLocation
					},
					success: (res) => {
						var TotalityData = res.data.data.LocationData;
						this.ec.option.xAxis.data = [TotalityData[0].Date, TotalityData[1].Date, TotalityData[
							2].Date, TotalityData[3].Date, TotalityData[4].Date, TotalityData[5].Date];
						this.ec.option.series[0].data = [TotalityData[0].newDiagnosis, TotalityData[1]
							.newDiagnosis, TotalityData[2].newDiagnosis, TotalityData[3].newDiagnosis,
							TotalityData[4].newDiagnosis, TotalityData[5].newDiagnosis
						];
						this.ec.option.series[1].data = [TotalityData[0].totalDiagnosis, TotalityData[1]
							.totalDiagnosis, TotalityData[2].totalDiagnosis, TotalityData[3]
							.totalDiagnosis, TotalityData[4].totalDiagnosis, TotalityData[5].totalDiagnosis
						]

					}
				})




			},
			initedEc2(myChart) {
				uni.request({
					header: {
						'Content-Type': 'application/json'
					},
					url: "http://101.43.7.172:5678/data-process/getDatasByCity",
					method: "POST",
					data: {
						"city": this.searchLocation
					},
					success: (res) => {
						var TotalityData = res.data.data.LocationData;
						this.ec2.option.xAxis.data = [TotalityData[0].Date, TotalityData[1].Date, TotalityData[
							2].Date, TotalityData[3].Date, TotalityData[4].Date, TotalityData[5].Date];
						console.log(TotalityData);
						this.ec2.option.series[0].data = [TotalityData[0].totalHeal, TotalityData[1].totalHeal,
							TotalityData[2].totalHeal, TotalityData[3].totalHeal, TotalityData[4]
							.totalHeal, TotalityData[5].totalHeal
						];
						console.log(TotalityData[0].totalHeal);
						this.ec2.option.series[1].data = [TotalityData[0].totalDeath, TotalityData[1]
							.totalDeath, TotalityData[2].totalDeath, TotalityData[3].totalDeath,
							TotalityData[4].totalDeath, TotalityData[5].totalDeath
						]

					}
				})




			},
			initedEc3(myChart) {
				uni.request({
					header: {
						'Content-Type': 'application/json'
					},
					url: "http://101.43.7.172:5678/data-process/getDatasByCity",
					method: "POST",
					data: {
						"city": this.searchLocation
					},
					success: (res) => {
						var TotalityData = res.data.data.LocationData;

						const newAdd = TotalityData[5].newDiagnosis; //新增
						const total = TotalityData[5].totalDiagnosis; //累计
						console.log(newAdd + " " + total);
						//安全度计算
						var denger = 0;
						var status = "";
						console.log(total == 0);
						if (total == 0) {
							denger = 100
						} else {
							if (newAdd < 500 && Math.trunc((100 - newAdd / 5) * 0.8) >= 0)
								denger += Math.trunc((100 - newAdd / 5) * 0.8);

							console.log(denger + " 1" + Math.trunc((100 - newAdd / 3) * 0.2) >= 0);
							if (total < 5000 && Math.trunc((100 - total / 50) * 0.1) >= 0)
								denger += Math.trunc((100 - total / 50) * 0.1);
							console.log(denger + "2 " + Math.trunc((100 - total / 30) * 0.6));
							if (Math.trunc((100 - newAdd / total * 1000) * 0.1) >= 0)
								denger += Math.trunc((100 - newAdd / total * 1000) * 0.1);
							console.log(denger + "3 " + Math.trunc((100 - newAdd / total * 1000) * 0.1) >= 0);
						}


						//确定状态
						if (denger >= 70)
							status = "十分安全";
						else if (denger >= 30)
							status = "较为危险";
						else
							status = "危险";

						console.log(denger + "5" + status);
						console.log(this.ec3.option.series[0].data);
						this.ec3.option.series[0].data[0].value = denger;
						this.ec3.option.series[0].data[0].name = status;
					}
				})





				/*//更新配置项
				myChart.setOption({
					 series: [
						 {
							 data: [
							{
								value: denger,
								name: status			
							}
							]
						 }
						
					 ]
					
				})*/
			},
			change1() {
				this.flag = '1'
				console.log(this.flag)
			},
			change2() {
				this.flag = '2'
				console.log(this.flag)
			}
		},
		data() {
			return {
				flag: '1',
				tableList: [],
				ec: {
					option: {
						title: {
							//1.标题居中
							//left的值为'left', 'center', 'right'
							left: 'center',
							//默认为10
							//2.主副标题之间的间距
							itemGap: 20,
							// 3.标题文本样式   
							text: this.searchLocation + ' * 新增/累计确诊',
							textStyle: {
								//文字颜色
								color: '#0000ff',
								//字体风格,'normal','italic','oblique'
								fontStyle: 'normal',
								//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
								fontWeight: 'bold',
								//字体系列
								fontFamily: 'sans-serif',
								//字体大小
								fontSize: 16
							}
						},
						color: ['#1890FF', '#FF7D00'],
						tooltip: {},
						legend: {
							show: true,
							top: 40,
							right: 0,
							align: 'left',
							x: 'center',
							y: 'top',
							icon: 'rect',
							itemHeight: 5,
							itemWidth: 15,
							data: ["新增确诊", "累计确诊"],
							textStyle: {
								color: 'rgba(255, 255, 255, 0.8)',
								fontSize: 12
							},
						},
						xAxis: {
							axisTick: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: '#0092D5'
								}
							},
							axisLabel: {
								color: 'rgba(255, 255, 255, 0.8)'
							},
							data: ['2022-04-19', '2022-04-20', '2022-04-21', '2022-04-22', '2022-04-23']
						},
						yAxis: {
							name: "(人)",
							nameTextStyle: {
								color: 'rgba(255, 255, 255, 0.8)',
								align: 'right'
							},
							splitLine: {
								lineStyle: {
									type: 'dashed',
									color: '#0092D5',
									opacity: 0.3
								}
							},
							axisLine: {
								show: false,
							},
							axisLabel: {
								color: 'rgba(255, 255, 255, 0.8)'
							},
						},
						grid: {
							top: '25%',
							bottom: '10%',
							left: '10%',
							right: '2%'
						},
						series: [{
								name: "新增确诊",
								barWidth: 15,
								type: 'line',
								smooth: true,
								data: [31, 22, 32, 12, 13],
							},
							{
								name: "累计确诊",
								barWidth: 15,
								type: 'line',
								smooth: true,
								data: [101, 140, 206, 239, 310],
							}
						]

					}
				},
				ec2: {
					option: {
						title: {
							//1.标题居中
							//left的值为'left', 'center', 'right'
							left: 'center',
							//默认为10
							//2.主副标题之间的间距
							itemGap: 20,
							// 3.标题文本样式   
							text: this.searchLocation + ' * 疫情治愈/死亡趋势图',
							textStyle: {
								//文字颜色
								color: '#0000ff',
								//字体风格,'normal','italic','oblique'
								fontStyle: 'normal',
								//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
								fontWeight: 'bold',
								//字体系列
								fontFamily: 'sans-serif',
								//字体大小
								fontSize: 16
							}
						},
						color: ['#11aa11', '#aa2211'],
						tooltip: {},
						legend: {
							show: true,
							top: 40,
							right: 0,
							align: 'left',
							x: 'center',
							y: 'top',
							icon: 'rect',
							itemHeight: 5,
							itemWidth: 15,
							data: ["治愈", "死亡"],
							textStyle: {
								color: 'rgba(255, 255, 255, 0.8)',
								fontSize: 12
							},
						},
						xAxis: {
							axisTick: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: '#0092D5'
								}
							},
							axisLabel: {
								color: 'rgba(255, 255, 255, 0.8)'
							},
							data: ['2022-04-17', '2022-04-18', '2022-04-19', '2022-04-20', '2022-04-21']
						},
						yAxis: {
							name: "(人)",
							nameTextStyle: {
								color: 'rgba(255, 255, 255, 0.8)',
								align: 'right'
							},
							splitLine: {
								lineStyle: {
									type: 'dashed',
									color: '#0092D5',
									opacity: 0.3
								}
							},
							axisLine: {
								show: false,
							},
							axisLabel: {
								color: 'rgba(255, 255, 255, 0.8)'
							},
						},
						grid: {
							top: '25%',
							bottom: '10%',
							left: '10%',
							right: '2%'
						},
						series: [{
							name: "治愈",
							barWidth: 15,
							type: 'line',
							smooth: true,
							data: [30, 32, 63, 71, 55, 97],
						}, {
							name: "死亡",
							barWidth: 15,
							type: 'line',
							smooth: true,
							data: [1, 14, 6, 9, 10, 15],
						}]
					}
				},
				ec3: {
					option: {
						series: [{
							type: 'gauge',
							axisLine: {
								lineStyle: {
									width: 10,
									color: [
										[0.3, '#ff0000'],
										[0.7, '#ffff00'],
					    	[1, '#00ff00']
									]
								}
							},
							pointer: {
								length: "30%",
								width: 3,
								itemStyle: {
									color: 'auto'
								}
							},
							axisTick: {
								distance: -30,
								length: 17,
								lineStyle: {
									color: '#fff',
									width: 2
								}
							},
							splitLine: {
								distance: -20,
								length: 10,
								lineStyle: {
									color: '#fff',
									width: 2
								}
							},
							axisLabel: {
								color: 'auto',
								distance: 10,
								fontSize: 15
							},
						 title: { // 仪表盘标题。
								show: true, // 是否显示标题,默认 true。
								offsetCenter: [0,
								85], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
								color: "auto", // 文字的颜色,默认 #333。
								fontSize: 20, // 文字的字体大小,默认 15。
							},

							detail: {
								valueAnimation: true,
								formatter: '{value}%',
								color: 'auto'
							},
							data: [{
								value: 50,
								name: "安全度"
							}]
						}]
					}
				}
			}
		}
	}
</script>

<style scoped>
	.block {
		border-radius: 20%;
		display: flex; //盒子模型
		flex-direction: column; //垂直排列
		float: left;
		justify-content: center;
		align-items: center;
		margin-top: 40rpx;
		margin-left: 40rpx;
		background-color: #0092D5;
		width: 200rpx;
		height: 200rpx;
		color: #efefef;
		overflow: hidden
	}

	.uni-ec-canvas {
		width: 750upx;
		height: 750upx;
		display: block;
	}

	.tu {
		/* border-color: #5500ff; */
		/* border-width: 50rpx; */
		display: block; //盒子模型
		/*flex-direction: row; */
		margin-top: 100rpx;
		/*height: 100rpx;*/
		width: 750rpx;
		color: #ffffff;
		background-color: #05132d;
	}

	.tu text {

		//盒子模型
		/*border: #4CD964; */

		color:  #0092D5;

		margin: 30rpx;
		position: relative;
		/*top: 220rpx;*/
		left: 20rpx;
		white-space: pre-wrap;
	}

	.tu_btn {
		width: 400rpx;
		height: 150rpx;
		text-align: center;
		line-height: 34px;
		border-radius: 34px;
		background-color:#05132d;
		font-size: 20px;
		font-weight: 700;
	}

	.box {

		width: 750rpx;
		display: flex; //盒子模型
		flex-direction: column; //垂直排列
		justify-content: center;
		align-items: center;
	}
</style>
